<template>
  <div class="q-pa-md q-gutter-sm">
    <t-editor
      v-model="editor"
      ref="editorRef"
      toolbar-text-color="white"
      toolbar-toggle-color="yellow-8"
      toolbar-bg="primary"
      :toolbar="[
        ['token'],
        ['bold', 'italic', 'underline'],
        [
          {
            label: $q.lang.editor.formatting,
            icon: $q.iconSet.editor.formatting,
            list: 'no-icons',
            options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
          },
        ],
      ]"
    >
      <template v-slot:token>
        <t-btn-dropdown
          dense
          no-caps
          ref="tokenRef"
          no-wrap
          unelevated
          color="white"
          text-color="primary"
					icon="check"
          label="Font Color"
          size="sm"
        >
          <t-list dense>
            <t-item tag="label" clickable @click="add('email')">
              <t-item-section side>
                <t-icon name="mail" />
              </t-item-section>
              <t-item-section>Email</t-item-section>
            </t-item>
            <t-item tag="label" clickable @click="add('title')">
              <t-item-section side>
                <t-icon name="title" />
              </t-item-section>
              <t-item-section>Title</t-item-section>
            </t-item>
          </t-list>
        </t-btn-dropdown>
      </template>
    </t-editor>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const editorRef = ref(null);
      const tokenRef = ref(null);

      return {
        editorRef,
        tokenRef,
        editor: ref('Customize it.'),

        add(name) {
          const edit = editorRef.value;
          tokenRef.value.hide();
          edit.caret.restore();
          edit.runCmd(
            'insertHTML',
            `&nbsp;<div class="editor_token row inline items-center" contenteditable="false">&nbsp;<span>${name}</span>&nbsp;<i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div>&nbsp;`,
          );
          edit.focus();
        },
      };
    },
  };
</script>
<style lang="sass">
  .editor_token
    background: rgba(0, 0, 0, .6)
    color: white
    padding: 3px
    &, .q-icon
      border-radius: 3px
    .q-icon
      background: rgba(0, 0, 0, .2)
</style>
